這堂課我們要做的是一個動態的關鍵字查詢介面。當我們在介面的輸入框輸入美國城市名或州名等關鍵字，下方列表會快速列出符合關鍵字的城市、州名稱以及人口數。範例如下：

邏輯流程

1. 將JSON資料存成一個Array
2. 寫一個字母匹配的函式，其回傳值為匹配成功之Array
3. 寫一個展示匹配成果的函式，將匹配成功之Array包裝成html
4. 監聽輸入文字的動作，執行上一步之函式
5. 將關鍵字highlight，並格式化人口數字

課程重點

1. fetch()：是HTML5的API，用來發送http request。如實作範例中，fetch(URL)回傳的是一個promise物件，我們能用then()來處理這個promise，而then()所回傳的物件仍是promise。promise的_proto_裡面有json()函式，而我們知道目標URL回傳的是JSON，因此在第一個then()中，我們將promise做.json()處理，接著在第二次then()將一筆筆資料放進Array。

2. match()：本實作的重要函式，用來做字串比對，配合Regular Expressions使用。

3. Regular Expressions：正規表示式，用來設計字串的pattern，進行比對用。例如今天想要在一篇文章中找出含有底線及1~5及小寫英文字的字串(什麼時候會有這種需求)，這時候就需要用正規表示式來設計你要的search pattern。

   在實作裡我們用new RegExp(wordToMatch, 'gi');產生pattern。wordToMatch是使用者輸入的字串，也就是說我們要根據這個字串在Array中進行搜尋，判斷是否有包含這個字串的資料。那後面的'gi'是兩個參數g和i，g是global matching，回傳全部符合的字串。i是case-insensitive matching，不分大小寫。另外還有m，multiline matching，能夠在多行搜尋。

4. join()：將Array變成一個string。實作中將join()加入參數''，參數要放的是separator，預設是用逗號分隔。但我們不希望html字串中有逗號，因此用單引號裡面不放東西，就不會有任何分隔符號。

延伸閱讀

• ES6 spread：在實作中我們看到在fetch資料的時候，做了一件事cities.push(...data)，那個"..."就是spread，也就是把data這個Array拆開，一個一個push進cities。若不做spread的話，cities就會變成一個Array裡面還有一個data Array。
• 格式化數字：實作中最後步驟就是把一串人口數字給格式化，變成每三位數一個逗號，方便閱讀。這時候就需要Regular Expression，而老師也是直接貼一段code給大家複製。以下是格式化數字的範例：

  unction numberWithCommas(x) {
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     }
  ``
  
  

參考來源

• JavaScript Regular Expressions
• ES6展開運算子